<template>
    <div
        class="h-full overflow-y-auto flex flex-col items-stretch"
    >
        <Header
            class="bg-white h-[50px]"
            :flow-name="flowInfo.flowName"
        />
        <Content
            class="h-[calc(100vh-145px)] border-t-solid border-t-[1px] border-t-[#DBDEE2]"
        />
    </div>
</template>
<script setup>
import Header from './components/header.vue';
import Content from './components/content.vue';
defineOptions({
    name: 'Jsplumb',
});
const flowInfo = ref({
    flowName: '流程Demo',
    nodes: [], // 节点
    lines: [], // 连线
});
const updateFlowNodes = (type, node) => {
    // 添加节点
    if (type === 'add') {
        flowInfo.value.nodes.push(node);
    } else {
        // 删除节点
        flowInfo.value.nodes = flowInfo.value.nodes.filter(
            (item) => item.id !== node.id,
        );
    }
    console.log(
        '🚀 ~ updateFlowNodes ~ flowInfo.value.nodes:',
        flowInfo.value.nodes,
    );
};
const updateFlowLines = (type, line) => {
    // 添加连线
    if (type === 'add') {
        flowInfo.value.lines.push(line);
    } else {
        // 删除连线
        flowInfo.value.lines = flowInfo.value.lines.filter(
            (item) => {
                if (
                    item.sourceId === line.sourceId &&
                    item.targetId === line.targetId
                ) {
                    return false;
                }
                return true;
            },
        );
    }
    console.log(
        '🚀 ~ updateFlowLines ~ flowInfo.value.lines:',
        flowInfo.value.lines,
    );
};
provide('flowInfo', flowInfo);
provide('updateFlowNodes', updateFlowNodes);
provide('updateFlowLines', updateFlowLines);
</script>
<style scoped lang="less"></style>
